<template>
  <!-- 电吹风 -->
  <div class="consumption_device_management">
    <el-row class="all_main">
      <dragdrop :width="0">
        <template slot="left">
          <div class="all_left">
            <div class="grid-content bg-purple">
              <div class="header_title">
                <span>区域楼栋</span>
              </div>
              <div class="tree_list">
                <!-- <el-scrollbar style="height: 100%"> -->
                <el-tree
                  :data="treedata"
                  node-key="id"
                  default-expand-all
                  :expand-on-click-node="false"
                  @node-click="clickNode"
                  :highlight-current="true"
                  ref="tree"
                  :indent="2"
                >
                  <span
                    class="custom-tree-node"
                    slot-scope="{ node, data }"
                    :style="{ paddingLeft: '0px' }"
                  >
                    <span
                      :class="
                          data.type == 'area' ? 'colorfont' : 'colorfont1'
                        "
                    >
                      <i :class="data.icon" :style="{ marginRight: '5px' }"></i>
                      {{ node.label }}
                    </span>
                  </span>
                </el-tree>
                <!-- </el-scrollbar> -->
              </div>
            </div>
          </div>
        </template>
        <template slot="right">
          <div class="all_right">
            <div
              class="grid-content bg-purple-light"
              v-show="showlist == 'building' ? true : false"
            >
              <div class="header_title">
                <span>{{ titlename }}</span>
              </div>
              <!-- 楼栋房间信息 -->
              <div class="area_bulding_main">
                <div class="building_room_main">
                  <el-card class="box-card1">
                    <div class="textitem1">
                      请选择楼层:
                      <div style="float: right">
                        <el-button size="mini" @click="editTemplate('building')">修改整栋楼的参数模板</el-button>
                      </div>
                    </div>
                    <div class="textitem2">
                      <el-row>
                        <el-col
                          id="add_room"
                          :span="2"
                          v-for="(item, index) in areabuldingfloor"
                          :key="index"
                          class="el_col_button"
                        >
                          <el-button
                            size="mini"
                            :class="{ contcolor: buttonindex === index }"
                            @click="checkfloors(index)"
                          >{{ index + 1 + "F" }}</el-button>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="textitem3">
                      <div
                        v-if="
                          buttonindex === '' || floorinformation == null
                            ? true
                            : false
                        "
                        class="textitem3_box"
                      >暂无数据</div>
                      <div
                        class="textitem3_box1"
                        v-if="
                          floorinformation != null &&
                          Object.keys(floorinformation) != 0
                            ? true
                            : false
                        "
                      >
                        <div class="textitem3_box1_one">
                          当前所选:&nbsp;&nbsp;{{ areaname }}&nbsp;&nbsp;{{
                          areabuldingname
                          }}&nbsp;&nbsp;
                          <span
                            style="color: #909399"
                          >楼层:</span>
                          <span
                            style="color: rgb(21, 161, 147); font-weight: 700"
                          >{{ buttonindex + 1 }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="color: #909399">在线设备:</span>
                          <span
                            style="color: rgb(21, 161, 147); font-weight: 700"
                          >{{ floorinformation.terminalOnLine }}</span>&nbsp;&nbsp;&nbsp;
                          <span style="color: #909399">不在线设备:</span>
                          <span style="color: #f56c6c; font-weight: 700">
                            {{
                            floorinformation.terminalNoOnLine
                            }}
                          </span>
                          <div style="float: right">
                            <el-button size="mini" @click="editTemplate('floor')">修改整层的参数模板</el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
              <div class="building_romm_list1" v-if="rooomlistArr.length != 0">
                <div class="shebeiColor S_67C23A"></div>
                <span>在线</span>
                <div class="shebeiColor S_F56C6C"></div>
                <span>控制器离线</span>
                <div class="shebeiColor S_FDBDBD"></div>
                <span>中继离线</span>
                <div class="shebeiColor S_E6A23C"></div>
                <span>设备离线</span>
                <!-- <div class="shebeiColor S_FFFF00"></div>
                <span>门锁低电量</span>-->
                <div class="shebeiColor S_C8BFE7"></div>
                <span>名单未下发</span>
                <div class="shebeiColor S_909399"></div>
                <span>设备未启用</span>
              </div>
              <!-- 房间分页信息 -->
              <div class="building_romm_list">
                <div class="textbox" v-for="(item, index) in rooomlistArr" :key="index">
                  <!-- 房间信息 -->
                  <el-card class="box-card">
                    <div
                      :class="[
                        { 'textmainlixian S_67C23A': item.terminalState == 1 },
                        { 'textmainlixian S_909399': item.terminalState == 2 },
                        { 'textmainlixian S_E6A23C': item.terminalState == 3 },
                        { 'textmainlixian S_F56C6C': item.terminalState == 4 },
                        { 'textmainlixian S_FDBDBD': item.terminalState == 5 },
                        { 'textmainlixian S_C8BFE7': item.terminalState == 6 },
                        { 'textmainlixian S_FFFF00': item.terminalState == 7 },
                      ]"
                    >
                      <div class="textitem">
                        <!-- <div class="textitem1">
                          <div id="nam_type"><span>类型:{{item.roomType | filetertype}}</span><span>编号:{{item.roomCode}}</span></div>
                          <div id="bianhao">
                            <span>编号:{{ item.terminalCode }}</span>
                          </div>
                        </div>-->
                        <div class="textitem">
                          <p>
                            <span class="titlename">编号:</span>
                            <span class="tittlecode">{{ item.terminalCode }}</span>
                          </p>
                          <p>
                            <span class="titlename">型号:</span>
                            <span class="tittlecode">{{ item.modelName }}</span>
                          </p>
                          <p>
                            <span class="titlename">路由:</span>
                            <span class="tittlecode">
                              {{ item.repeaterCode1 }},{{
                              item.repeaterCode2
                              }},{{ item.repeaterCode3 }},{{
                              item.repeaterCode4
                              }}
                            </span>
                          </p>
                          <p>
                            <span class="titlename">所属网关:</span>
                            <span class="tittlecode">{{ item.ip }}</span>
                          </p>
                          <p>
                            <span class="titlename">设备状态:</span>
                            <span class="tittlecode">
                              {{
                              item.terminalState | fileterstate
                              }}
                            </span>
                          </p>
                          <p>
                            <span class="titlename">参数模板:</span>
                            <span class="tittlecode">
                              {{
                              item.templateName
                              }}
                            </span>
                          </p>
                          <p>
                            <span class="titlename">所属位置:</span>
                            <span class="tittlecode">{{ item.roomName }}</span>
                          </p>
                          <!-- <p>
                            <span class="titlename">是否启用:</span>
                            <span class="tittlecode">{{
                              item.isUse | fileterisuse
                            }}</span>
                          </p>-->
                          <!-- <p>
                          <span class="titlename">信道:</span
                          ><span class="tittlecode">{{ item.port }}</span>
                          </p>-->
                        </div>
                      </div>
                    </div>
                    <div class="textitemfoort">
                      <el-row class="bulding_caozuo">
                        <el-col :span="7" :offset="18" class="bulding_font_size">
                          <el-dropdown @command="handleCommand" trigger="click">
                            <el-button type="text" icon="el-icon-more" @click="addroomstaff(item)"></el-button>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item command="a">详细信息</el-dropdown-item>
                              <el-dropdown-item command="b">选择参数模板</el-dropdown-item>
                              <el-dropdown-item command="c">修改路由信息</el-dropdown-item>
                              <!-- <el-dropdown-item command="d"
                                >门资料管理</el-dropdown-item
                              >-->
                              <!-- <el-dropdown-item command="e">通行记录</el-dropdown-item> -->
                            </el-dropdown-menu>
                          </el-dropdown>
                        </el-col>
                      </el-row>
                    </div>
                  </el-card>
                </div>
              </div>
              <!-- 分页 -->
              <div class="page" v-show="recordCount > 10 ? true : false">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangepage"
                  :current-page="currentPage"
                  :page-sizes="[ 20, 30, 40, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="recordCount"
                ></el-pagination>
              </div>
              <!-- 消费信息弹窗 -->
              <add-or-update
                v-if="addOrUpdateVisible"
                ref="addOrUpdate1"
                @refreshDataList="getlayersroomlist(buttonindex + 1)"
                :buttonindex="buttonindex"
              ></add-or-update>
            </div>
          </div>
        </template>
      </dragdrop>
    </el-row>
    <!-- 参数模板修改弹窗 -->
    <el-dialog
      width="500px"
      custom-class="customWidth"
      center
      :before-close="parametercloseDialog"
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="parameterDialogFormVisible"
    >
      <el-form
        :model="parameterdataForm"
        :rules="parameterRule"
        ref="parameterdataForm"
        label-width="80px"
        :disabled="!isauth('hairdrider_edit')"
      >
        <el-form-item label="模板" prop="template">
          <el-col :span="15">
            <el-select
              v-model="parameterdataForm.template"
              placeholder="请选择"
              style="width: 100%"
              size="mini"
            >
              <el-option
                v-for="item in templateoption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="isauth('hairdrider_edit')">
        <el-button @click="parametervisible()">取消</el-button>
        <el-button type="primary" @click="parameterdataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import AddOrUpdate from './management-add-update'
export default {
  data() {
    return {
      treedata: [],
      titlename: '',
      showlist: '',
      // 区域
      areaname: '',
      areabuldingname: '',
      // 楼栋设备信息
      floorinformation: {},
      // 选择楼层
      buttonindex: '',
      // 楼层数
      areabuldingfloor: 0,
      // 楼层房间
      rooomlistArr: [],
      pageSize: 30,
      pageNum: 1,
      recordCount: 0,
      currentPage: 1,
      // 楼栋id
      buildingid: '',
      addOrUpdateVisible: false,
      //房间信息
      roomitem: {},
      // 模板参数弹窗
      parameterDialogFormVisible: false,
      // 标题
      title: '',
      // 看是什么修改 true为楼层修改
      isCheck: false,
      // 模板数据
      parameterdataForm: {
        template: '',
        // 什么类型的电吹风 21 4门， 23 双门
        terminalType: 28
      },
      templateoption: [],
      // 模板规则
      parameterRule: {
        template: [
          { required: true, message: '请选择参数模板', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  mounted() {
    this.getareabuldingtree()
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
  },
  components: {
    AddOrUpdate
  },
  filters: {
    filetertype: function(roomType) {
      if (roomType == 0) {
        return (roomType = '房间')
      }
      if (roomType == 1) {
        return (roomType = '食堂窗口')
      }
      if (roomType == 3) {
        return (roomType = '小卖部')
      }
      if (roomType == 2) {
        return (roomType = '通道门')
      }
      if (roomType == 4) {
        return (roomType = '公共场所')
      }
    },
    fileterstate: function(terminalState) {
      if (terminalState == 1) {
        return (terminalState = '设备在线')
      }
      if (terminalState == 2) {
        return (terminalState = '设备未启用')
      }
      if (terminalState == 3) {
        return (terminalState = '设备离线')
      }
      if (terminalState == 4) {
        return (terminalState = '控制器离线')
      }
      if (terminalState == 5) {
        return (terminalState = '中继离线')
      }
      if (terminalState == 6) {
        return (terminalState = '名单未下发')
      }
      if (terminalState == 7) {
        return (terminalState = '门锁低电量')
      }
    },
    fileterisuse: function(isUse) {
      if (isUse == 0) {
        return (isUse = '未启用')
      }
      if (isUse == 1) {
        return (isUse = '已启用')
      }
    }
  },
  methods: {
    terminalTypeChange(val) {
      this.parameterdataForm.template = ''
      this.terminaltemplate(val)
    },
    // 参数模板窗口
    parametercloseDialog(done) {
      this.$refs['parameterdataForm'].resetFields()
      done()
    },
    parametervisible() {
      this.$refs['parameterdataForm'].resetFields()
      this.parameterDialogFormVisible = false
    },
    //获取设备模板
    terminaltemplate(terminalType) {
      this.$http({
        url: this.$http.adornUrl('/terminal/template-model-select'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            terminalType: terminalType,
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          let Arr = data.messageContent
          if (this.templateoption.length != 0) {
            this.templateoption = []
          }
          for (var i = 0; i < Arr.length; i++) {
            var itemObj = {
              label: Arr[i].templateName,
              value: Arr[i].templateGuid
            }
            this.templateoption.push(itemObj)
          }
          console.log(this.templateoption)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 批量修改参数模板
    parameterdataFormSubmit() {
      this.$refs['parameterdataForm'].validate(valid => {
        if (valid) {
          this.$confirm(`是否确定${this.title}`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let messageContentObj = {
              buildingGuid: this.buildingid,
              layer: this.buttonindex + 1,
              templateGuid: this.parameterdataForm.template,
              terminalType: this.parameterdataForm.terminalType,
              unitGuid: this.changeschoolid
            }
            if (!this.isCheck) {
              delete messageContentObj.layer
            }
            this.$http({
              url: this.$http.adornUrl(
                '/terminal/building-terminal-template-update'
              ),
              method: 'post',
              data: this.$http.adornData({
                messageContent: messageContentObj,
                messageType: 0
              })
            }).then(({ data }) => {
              if (data.messageCode == 200) {
                this.$message({
                  type: 'success',
                  message: '修改成功!',
                  duration: 200,
                  onClose: () => {
                    this.parameterDialogFormVisible = false
                    if (this.rooomlistArr != 0) {
                      this.getlayersroomlist(this.buttonindex + 1)
                    }
                  }
                })
              } else {
                this.$message.error(data.errorMessage)
              }
            })
          })
        }
      })
    },
    // 批量修改参数模板
    editTemplate(name) {
      console.log(this.buildingid, this.buttonindex + 1)
      this.parameterDialogFormVisible = true
      this.parameterdataForm.terminalType = 28
      this.terminaltemplate(this.parameterdataForm.terminalType)
      this.$nextTick(() => {
        this.$refs['parameterdataForm'].resetFields()
      })
      if (name == 'building') {
        this.isCheck = false
        this.title = `修改${this.areabuldingname}电吹风设备的参数模板`
        console.log(this.buildingid)
      } else if (name == 'floor') {
        this.isCheck = true
        this.title = `修改${this.areabuldingname +
          (this.buttonindex + 1)}层电吹风设备的参数模板`
      }
    },

    // 得到当前楼栋下设备的在线情况
    getTerminal(buildingGuid, layer) {
      this.$http({
        url: this.$http.adornUrl('/area/room/build-layer-terminal-state'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            terminalType: 28,
            buildingGuid: buildingGuid,
            unitGuid: this.changeschoolid,
            layers: layer + 1
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data)
          this.floorinformation = data.messageContent
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    handleCommand(command) {
      console.log(this.roomitem, this.changeschoolid, this.buildingid)
      if (command == 'a') {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate1.init(this.roomitem, this.changeschoolid)
        })
      }
      if (command == 'b') {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate1.parameterinit(
            this.roomitem,
            this.changeschoolid
          )
        })
      }
      if (command == 'c') {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate1.relayinit(
            this.roomitem,
            this.changeschoolid,
            this.buildingid
          )
        })
      }
      if (command == 'd') {
        console.log()
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate1.personnelinit(
            this.roomitem,
            this.changeschoolid,
            this.buildingid
          )
        })
      }
      if (command == 'e') {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate1.recordsinit(
            this.roomitem,
            this.changeschoolid,
            this.buildingid,
            this.treedata
          )
        })
      }
    },
    //房间修改
    addroomstaff(item) {
      console.log(item)
      this.roomitem = item
    },
    //房间分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getlayersroomlist(this.buttonindex + 1)
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getlayersroomlist(this.buttonindex + 1)
    },
    // 树状数据添加
    recursiveget(treedata) {
      for (var i in treedata) {
        if (treedata[i].type == 'area') {
          treedata[i].icon = 'el-icon-map-location'
          this.recursiveget(treedata[i].children)
        } else {
          treedata[i].icon = 'el-icon-office-building'
          this.recursiveget(treedata[i].children)
        }
      }
      return treedata
    },
    // 递归区域路径
    getPath(node) {
      var text
      if (node.parent && node.parent.label) {
        text = this.getPath(node.parent)
        text = text + '/' + node.label
      } else {
        text = node.label
      }
      return text
    },
    // 选择楼层
    checkfloors(val) {
      this.pageNum = 1
      this.buttonindex = val
      this.getTerminal(this.buildingid, this.buttonindex)
      this.getlayersroomlist(this.buttonindex + 1)
    },
    // 树形控件点击
    clickNode(obj, node) {
      console.log(obj)
      console.log(node)
      if (node != null) {
        this.titlename = this.getPath(node)
      }
      // 点击区域
      if (obj.type == 'area') {
        this.showlist = 'area'
      }
      if (obj.type == 'building') {
        this.showlist = 'building'
        this.areabuldingfloor = obj.layer

        // 楼栋信息
        this.areaname = node.parent.label
        this.areabuldingname = obj.label
        console.log(this.areaname, this.areabuldingname)
        // 楼栋设备信息
        this.floorinformation = {}
        this.buttonindex = ''
        this.rooomlistArr = []
        this.recordCount = 0
        this.buildingid = obj.name
        // 默认打开第一层
        this.checkfloors(0)
      }
    },
    // 获取区域楼栋树形数据
    getareabuldingtree(val) {
      this.$http({
        url: this.$http.adornUrl('/area/room/get-area-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.treedata = this.recursiveget(data.messageContent)
          //   this.getarealsit(data.messageContent)
          console.log(this.treedata)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 指定楼栋下的房间信息分页查询,terminalType设备类型
    getlayersroomlist(val) {
      this.$http({
        url: this.$http.adornUrl('/area/room/room-details-terminal-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: {
              buildingGuid: this.buildingid,
              layers: val,
              unitGuid: this.changeschoolid,
              terminalType: 28
            }
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data)
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          this.rooomlistArr = data.messageContent.data
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    }
  }
}
</script>
  
  <style lang="scss" scoped>
.consumption_device_management {
  #nam_type {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;
    > span:nth-child(1) {
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
    }
    > span:nth-child(2) {
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
    }
  }
  #bianhao {
    > span {
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
    }
  }
  .all_main {
    height: calc(100vh - 130px);
    .all_left {
      // height: 400px;
      height: 100%;
      // border-right: 2px solid #ccc;
      .bg-purple {
        height: 100%;
        width: 100%;
        // overflow-x: scroll;
        white-space: nowrap;
        // padding: 0 10px 0 0px;
        .header_title {
          padding: 20px 0;
          font-weight: bolder;
          text-align: center;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
          overflow: hidden;
        }
        .add_button {
          display: flex;
          padding-top: 20px;
          justify-content: center;
          border-bottom: 1px solid #e5e9f2;
          padding-bottom: 10px;
          overflow: hidden;
        }
        //滚动条的宽度
        ::-webkit-scrollbar {
          overflow-y: auto;
          width: 10px;
          height: 10px;
        }
        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #a1a3a9;
          border-radius: 3px;
        }
        .tree_list {
          height: calc(100vh - 185px);
          width: 100%;
          overflow-x: hidden;
          overflow-y: auto;
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
          }
          .custom-tree-node {
            // padding-left: 10px;
            /deep/.el-button + .el-button {
              margin-left: 0px;
            }
            //
            font-size: 12px;
            .colorfont {
              color: #17b3a3;
            }
          }
        }
      }
    }
    .all_right {
      height: calc(100vh - 130px);
      overflow: auto;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }
      .page {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .bg-purple-light {
        .header_title {
          padding: 10px 0 20px 0;
          font-weight: bolder;
          padding-left: 20px;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
        }
        .area_bulding_main {
          .building_room_main {
            margin-top: 10px;
            padding: 0px 10px;
            .box-card1 {
              padding: 10px;
              .textitem1 {
                color: #909399;
                padding-bottom: 10px;
              }
              .textitem2 {
                padding-bottom: 10px;
                border-bottom: 1px solid #e5e9f2;
                line-height: 30px;
                .contcolor {
                  color: #fff;
                  background-color: #45c2b5;
                }
              }
              .textitem3 {
                .textitem3_box {
                  height: 50px;
                  font-size: 16px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-weight: bolder;
                  color: #909399;
                }
                .textitem3_box1 {
                  color: #909399;
                  padding-bottom: 10px;
                  .textitem3_box1_one {
                    padding-top: 10px;
                  }
                }
                .addroom {
                  display: flex;
                  // justify-content: center;
                  align-items: center;
                }
              }
            }
          }
        }
        // 图解
        .building_romm_list1 {
          padding: 10px 10px 0 10px;
          .shebeiColor {
            display: inline-block;
            width: 20px;
            height: 14px;
          }
          span {
            margin-right: 20px;
          }
        }
        // 颜色
        // 在线
        .S_67C23A {
          background-color: #67c23a;
        }
        .S_F56C6C {
          background-color: #f56c6c;
        }
        .S_FDBDBD {
          background-color: #fdbdbd;
        }
        .S_E6A23C {
          background-color: #e6a23c;
        }
        .S_FFFF00 {
          background-color: #ffff00;
        }
        .S_C8BFE7 {
          background-color: #c8bfe7;
        }
        .S_909399 {
          background-color: #909399;
        }
        .building_romm_list {
          margin-top: 10px;
          padding: 0px 10px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .textbox {
            margin-top: 10px;
            width: 160px;
            margin-right: 10px;
            .box-card {
              .textmainlixian {
                height: 140px;
                font-weight: bolder;
                color: #fff;
                padding: 5px 5px;
                .textitem {
                  margin-bottom: 5px;
                  margin-top: 5px;
                  p {
                    margin-top: 5px;
                    margin-bottom: 5px;
                    font-size: 12px;
                  }
                }
                .titlename {
                  width: 52px;
                  display: inline-block;
                  text-align: left;
                }
              }
              .textmainlzaixian {
                height: 200px;
                font-weight: bolder;
                color: #fff;
                padding: 5px 5px;
                .textitem {
                  margin-bottom: 5px;
                  margin-top: 20px;
                  p {
                    margin-top: 10px;
                    margin-bottom: 5px;
                  }
                }
                .titlename {
                  width: 75px;
                  display: inline-block;
                  text-align: left;
                }
              }
              .textitemfoort {
                height: 100%;
                border-top: 1px solid #e5e9f2;
                .bulding_caozuo {
                  padding: 0px 0px;
                  height: 28px;
                  .bulding_font_size,
                  .bulding_font_size1 {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 1px solid #e5e9f2;
                    .el-button--medium {
                      font-size: 16px;
                      padding: 5px 10px;
                    }
                  }
                  .bulding_font_size1 {
                    border-right: 0px solid #e5e9f2;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>